/* eslint-disable react/forbid-prop-types */
import PropTypes from 'prop-types'
import React, { Component } from 'react'
import { Animated, Dimensions, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native'

const screenWidth = Dimensions.get('window').width
const defaultVisiableCount = 5 // 默认显示的tab数量

export default class TabIndicator extends Component {
    static propTypes = {
      tabBarActiveTextColor: PropTypes.string, // tab选中时文字显示的颜色
      tabBarInactiveTextColor: PropTypes.string, // tab未选中时文字的颜色
      tabBarActiveBGColor: PropTypes.string, // tab选中时背景显示的颜色
      tabBarInactiveBGColor: PropTypes.string, // tab未选中时背景的颜色
      tabNames: PropTypes.array, // tab名称集合
      tabTextStyle: PropTypes.any, // tab文本的样式
      tabBarUnderlineStyle: PropTypes.any, // tab下划线的样式
      tabHeight: PropTypes.number// tab的高度
    };

    static defaultProps = {
      tabBarActiveTextColor: '#686868',
      tabBarInactiveTextColor: '#cccccc',
      tabBarActiveBGColor: '#ffffff',
      tabBarInactiveBGColor: '#F2F5F6',
      tabNames: [],
      tabHeight: 50
    }

    constructor (props) {
      super(props)
      this.state = {
        transAnimX: new Animated.Value(0) // 指示器平移动画
      }
      this.tabManager = []
      this.tabRef = []
      this.tabWidth = 0// 单个tab的宽度
      this.currPosition = 0// 当前位置
      this.tabRender = false
      // this.totalTabWidth = 0// 所有tab宽度之和
    }
    // 点击tab时触发
    clickToTrans = (index) => {
      this.currPosition = index
      if (this.props.onTabPress) {
        this.props.onTabPress(index)// 通知外部点击的位置
      } else {
        this.swipeToTrans(index) // 外部没有设置关联时自己处理
      }
    }
    // 关联的ScrollView滚动时触发
    swipeToTrans = (index) => {
      this.currPosition = index
      // console.log("swipeToTrans:index=" + index)
      if (index >= (defaultVisiableCount - 1)) {
        this.scrollToNext()
      } else if (index >= 0) {
        // console.log(index - (defaultVisiableCount - 1) > 0)
        this.scrollToPre()
      }
      // 移动指示器
      this.state.transAnimX.setValue(index)
      // 遍历所有tab,根据当前选中的index修改颜色
      this.tabRef.map((ref) => { ref.changeState(index) })
    }
    // 滚动下一个tab
    scrollToNext = () => {
      // console.log("scrollToNext")
      let x = (this.currPosition - (defaultVisiableCount - 1) + 1) * this.tabWidth
      this.sv.scrollTo({ x: x, y: 0, animated: true })
    }
    // 滚动上一个tab
    scrollToPre = () => {
      // console.log("scrollToPre")
      let x = -this.tabWidth
      this.sv.scrollTo({ x: x, y: 0, animated: true })
    }
    render () {
      if (!this.tabRender) {
        if (this.props.tabNames) {
        // 计算单个tab的宽度
        // this.tabWidth = this.props.tabNames.length > defaultVisiableCount
        //   ? screenWidth / defaultVisiableCount
        //   : screenWidth / this.props.tabNames.length
          this.tabWidth = this.props.tabWidth
          // this.totalTabWidth = this.tabWidth * this.props.tabNames.length
          // 创建所有tabView
          for (let index = 0; index < this.props.tabNames.length; index++) {
            this.tabManager.push(
              <Tab index={index}
                key={index + 'tab'}
                onTabPress={(index) => {
                  this.clickToTrans(index)
                }}
                ref={(r) => { this.tabRef[index] = r }}
                selectedBGColor={this.props.tabBarActiveBGColor}
                selectedTextColor={this.props.tabBarActiveTextColor}
                style={{ ...this.props.tabTextStyle }}
                tabHeight={this.props.tabHeight}
                tabWidth={this.tabWidth}
                title={this.props.tabNames[index]}
                unselectedBGColor={this.props.tabBarInactiveBGColor}
                unselectedTextColor={this.props.tabBarInactiveTextColor}
              />
            )
          }
        }
        if (this.tabManager.length > 0) {
          this.tabRender = true
        }
      }
      return (
        <View style={{ height: this.props.tabHeight, width: screenWidth, backgroundColor: this.props.tabBarInactiveBGColor, zIndex: 10, position: 'absolute' }}>
          <ScrollView
            horizontal
            keyboardDismissMode="on-drag"
            overScrollMode="never"
            ref={(r) => { this.sv = r }}
            showsHorizontalScrollIndicator={false}
          >
            {/* 所有tab */}
            {this.tabManager}

            {/* 指示器 */}
            {/* <Animated.View style={[styles.tabLine, { width: this.tabWidth },
                    {
                        transform: [
                            {
                                translateX: this.state.transAnimX.interpolate({
                                    inputRange: [0, this.props.tabNames.length], //0~tab个数
                                    outputRange: [0, this.totalTabWidth] //0~所有tab的总宽度
                                })
                            }
                        ]

                    }
                    ]} /> */}
          </ScrollView>

          {/* 默认线 */}
          {/* <View style={styles.line} /> */}
        </View>
      )
    }
}
/**
 * 单个tab
 */
// eslint-disable-next-line react/no-multi-comp
class Tab extends Component {
  constructor (props) {
    super(props)
    this.state = {
      selected: 0 // 选中的下标
    }
  }
  render () {
    return (
      <TouchableOpacity
        // underlayColor='white'
        onPress={() => {
          this.props.onTabPress && this.props.onTabPress(this.props.index)
        }}
        style={[{ height: this.props.tabHeight,
          width: this.props.tabWidth,
          backgroundColor: this.state.selected === this.props.index ? this.props.selectedBGColor : this.props.unselectedBGColor }, styles.tabStyle]}>
        <Text style={{
          textAlign: 'center',
          color: this.state.selected === this.props.index ? this.props.selectedTextColor : this.props.unselectedTextColor,
          ...this.props.style
        }}>
          {this.props.title}
        </Text>
      </TouchableOpacity>
    )
  }
    // 修改选中的index
    changeState = (index) => {
      this.setState({
        selected: index
      })
    }
}
const styles = StyleSheet.create({
  line: {
    backgroundColor: '#cccccc',
    width: screenWidth,
    height: 1
  },
  tabLine: {
    position: 'absolute',
    bottom: 0,
    height: 2,
    backgroundColor: '#FFE97A'
  },
  tabStyle: {
    justifyContent: 'center',
    alignContent: 'center'
  }
})